<script setup>;
import { useRouter } from 'vue-router';


const router = useRouter();

const data = defineProps({
  simplePostData: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
})



</script>

<template>
  <div class="item">
    <span class="index">{{ index + 1 }}</span>
    <span class="description" @click="router.push('/postDetail/' + (simplePostData.postId))">{{
      (simplePostData?.title)
    }}</span>
    <span>{{ simplePostData.readNumber }}</span>
  </div>
</template>

<style lang='scss' scoped>
.item {
  /* 使用 flexbox 布局 */
  display: flex;
  /* 垂直居中对齐 */
  align-items: center;
  margin: 10px 0;
  /* 防止换行 */
  white-space: nowrap;


  &>span:nth-child(1) {
    color: red;
    margin-right: 10px;
  }

  &>.description {
    /* 允许第二个 span 占用剩余空间 */
    flex: 1;
    /* 给第三个 span 留出空间 */
    margin-right: 20px;
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 使用省略号表示溢出 */
    text-overflow: ellipsis;
    /* 防止换行 */
    white-space: nowrap;
  }

  &>span:nth-child(2):hover {
    color: $highlight-color;
    cursor: pointer;
  }

  &>span:nth-child(3) {
    color: rgb(142, 127, 127);
    font-size: 16px;
    min-width: 30px;
  }
}
</style>
